<template>
<div>
<!-- 最外层大盒子===固定高度=》横盒子 -->
  <div class="box" :style="{ height }">
    <!-- 列表容器===》竖盒子-->
    <div class="itembox">
      <!-- 列表===》小盒子-->
      <!-- class="item"需要删除，不然不会显示，或者会竖着显示 -->
      <Filmitem :nowplays="nowplays" :key="nowplays.length"></Filmitem>
    </div>
  </div>
</div>
</template>

<script>
import BetterScroll from "better-scroll";

import Filmitem from "../../components/Filmitem";


//调用api请求数据方法
import {filmListData} from '../../api/api'

export default {
  components:{
    Filmitem
  },
  data() {
    return {
      page:1,
      //正在热映数据源
      nowplays:[],

      // 滚动容器的高度 计算出来
      height: 0,
      // 滚动对象
      scroll: null,
    };
  },

  async mounted(){
    // 外层滚动容器高度
    this.height = document.documentElement.clientHeight - 50 + "px";

    // 异步，在刚开始没有数据
    let ret=await filmListData(this.page);
    this.nowplays=ret.data.data.films;

    // 异步执行完毕后执行的方法
    this.$nextTick(()=>{
      this.scroll = new BetterScroll(".box");
    });

  },

  beforeDestroy() {
    // 组件销毁之前要清掉所创建的动画
    this.scroll = null;
  },
  
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  overflow: hidden;
}
</style>
